<!DOCTYPE html>
<html lang="zh_CN">
<head>

<link rel="stylesheet" type="text/css"
	href="../css/dist/bootstrap-combined.css">
<link rel="stylesheet" type="text/css" href="../css/dist/layoutit.css">
<script src="../css/dist/jquery-1.11.2.min.js"></script>
<script src="../css/dist/bootstrap.min.js"></script>
<script type="text/javascript" src="../ui/jslib/rainbow/json2.min.js"></script>
<script type="text/javascript" src="../ui/jslib/rainbow/rainbow.js"></script>
<script type="text/javascript" src="../ui/jslib/rainbow/rainbowAjax.js"></script>
<script type="text/javascript" src="../ui/jslib/rainbow/rainbowDialog.js"></script>
<script type="text/javascript" src="../ui/jslib/rainbow/rainbowutil.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
	select,input{
		width: 150px;
	}
	
	.width{
		width: 250px;
	}
</style>

<script type="text/javascript">
	$(document).ready(function(){
		$("#ope").change(function(){
			$("select[name='select_']").hide();
			$("#selectwhere").hide();
			var v = $(this).val();
			if(v.length>0){
				$("#"+v).show();
			}
		})
		
		$("#show").change(function(){
			$("#selectwhere").hide()
			var where = $(this).find("option:selected").attr("wher");
			if(where!=null&&where.length>0){
				$("#selectwhere").show();				
			}
		});
		
		initConn();
		
		$("#show").change(function(){
			
			$("#table1 thead tr").remove();
			$("#table1 tbody tr").remove();
			
			
			
			var v = $(this).val();
			var c = $("#con").val();
			if(v.length>0&&c.length>0){
				search1();
			}
		});
		
		$("#con").change(function(){
			$("#table1 thead tr").remove();
			$("#table1 tbody tr").remove();
			
			
			
			var v = $(this).val();
			var s = $("#show").val();
			if(v.length>0&&s.length>0){
				search1();
			}
		});
	});
	
	
	function initConn(){
		var rainbow = new Rainbow();
		rainbow.setService("mycatService");
		rainbow.setMethod("query");
		sendCommand("../dispatcherAction/execute.do",rainbow,"post",new queryCallback());
	}
	
	var queryCallback = function(tr){
		this.onSuccess=function(data){
			$.each(data.rows,function(index,obj){
				var p = obj.mycatName;
				var v = obj.mycatName;
				$("#con").append("<option value=\""+v+"\">"+p+"</option>")
			});
		};
		this.onFail = function(jqXHR, textStatus, errorThrown){
			alert("error");
		};
	}
	
	
</script>
</head>
	<div class="row-fluid">
		<div class="span12">
			<blockquote>
				<p>MyCAT系统参数查询. </p>
				<p>
					<small>system command</small>
				</p>
			</blockquote>
			<form class="form-search form-inline">
				<select id="con">
					<option value="">请选择数据源</option>
				</select>
				<select id="ope" style="display: none;">
					<option value="show">show</option>
				</select>
				<select name="select_" id="show" class="width">
					<option value="">请选择</option>
					<option value="backend">Report backend connection status</option>
					<option value="cache">Report system cache usage</option>
					<option value="command">Report commands status</option>
					<option value="connection">Report connection status</option>
					<option value="connection.sql">Report connection sql</option>
					<option value="database">Report databases</option>
					<option value="datanode">Report dataNodes</option>
					<option value="datasource">Report dataSources</option>
					<option value="heartbeat">Report heartbeat status</option>
					<option value="parser">Report parser status</option>
					<option value="processor">Report processor status</option>
					<option value="router">Report router status</option>
					<option value="server">Report server status</option>
					<option value="session">Report front session details</option>
					<option value="sql.execute">Report execute status</option>
					<option value="sql.slow">Report slow SQL</option>
					<option value="threadpool">Report threadPool status</option>
					<option value="time.current">Report current timestamp</option>
					<option value="time.startup">Report startup timestamp</option>
					<option value="version">Report Mycat Server version</option>
					
					
				</select>&nbsp;
				<input type="text" name="selectwhere" id="selectwhere" style="display: none;">
				<a class="btn btn-primary" onclick="search1();" style="display: none;">查询</a>
			</form>
			<table class="table table-striped table-hover table-bordered table-condensed" id="table1">
				<thead>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
</html>

<script type="text/javascript">
function search1(){
	

	var con = $("#con").val();
	if(con.length==0){
		alert("请选择数据源");
		return;
	}
	
	var ope = $("#ope").val();
	var show=$("#show").val();
	var selectwhere = $("#selectwhere").val();
	
	if(ope.length==0||show.length==0){
		alert("请完善参数");
		return;
	}
	var params ={con:con,operate:ope,"monitor":show};
	var wher = $("#show").find("option:selected").attr("wher");
	var wherev = null;
	if(wher!=null&&wher.length>0){
		if(selectwhere==null||selectwhere.length==0){
			alert("请完善参数");
			return;
		}
	}
	params.wherevalue=selectwhere;
	params.wherekey = wher;
	
	var rainbow = new Rainbow();
	rainbow.attr=params;
	rainbow.setService("mycatService");
	rainbow.setMethod("monitor");
	sendCommand("../dispatcherAction/execute.do",rainbow,"post",new searchCallback());
}

var searchCallback = function(){
	this.onSuccess=function(data){
		var tr = "<tr>";
		$.each(data.attr.keys,function(ind,obj){
			tr+="<td>"+obj+"</td>";
		});
		tr+="</tr>";
		$("#table1 thead").append(tr);
		
		$.each(data.rows,function(ind,row){
			var tr = "<tr>";
			$.each(data.attr.keys,function(ind,obj){
				tr+="<td>"+eval("row."+obj)+"</td>";
			});
			tr+="</tr>";
			$("#table1 tbody").append(tr);
		});
	};
	this.onFail = function(jqXHR, textStatus, errorThrown){
		alert("error");
	};
}
</script>